<template>
	<div class="home">
		<el-row :gutter="20" type="flex" justify="space-around">
			<el-col :span="6">
				<div class="grid-content bg-blue">
					<div>{{staffNum}}</div>
					<p>员工人数</p>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-green">
					<div>{{monthUser}}</div>
					<p>本月入职</p>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-yellow">
					<div>{{leaveUser}}</div>
					<p>本月离职</p>
				</div>
			</el-col>
		</el-row>

		<div class="table-title">
			<i class="el-icon-sunrise" style="font-size: 20px"></i>
			<span style="margin-left: 10px">人事提醒</span>
		</div>
		<table>
			<tr>
				<td style="width: 150px">
					<div>0</div>
					<p>7天内待转正</p>
				</td>
				<td style="width: 200px">
					<p>暂无</p>
				</td>
				<td ><button>查看更多</button></td>
			</tr>
			<tr>
				<td style="width: 150px">
					<div>0</div>
					<p>7天内合同到期</p>
				</td>
				<td style="width: 200px">
					<p>暂无</p>
				</td>
				<td ><button>查看更多</button></td>
			</tr><tr>
				<td style="width: 150px">
					<div>0</div>
					<p>7天内证书到期</p>
				</td>
				<td style="width: 200px">
					<p>暂无</p>
				</td>
				<td ><button>查看更多</button></td>
			</tr>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		 return {
			staffNum: 0,
			monthUser: 0,
			leaveUser: 0
		}
	},
	created() {
		this.getNumber()
	},
	methods: {
		getNumber() {
			this.$http('user/getUsercount', 'get', null, true, resp => {
				// console.log(resp);
				if (resp.code == 200) {
					let {data} = resp
					this.staffNum = data.user
					this.monthUser = data.monthUser
					this.leaveUser = data.userLeave
				}
			})
		}
	},
} 
</script>

<style lang="scss" scoped="scoped">
@import './home.scss';
</style>
